<template>
  <view class="wrapper">
    <view class="header" v-if="detail">
      <image class="left" :src="detail.goodsCover"></image>
      <view class="right">
        <view class="name">{{ detail.goodsName }}</view>
        <!--<view class="level">{{ detail.staffName }}</view>-->
      </view>
    </view>

    <view class="info" v-if="detail">
      <view class="item" @click="handleLocationClick">
        <view class="label">{{ detail.comName }}</view>
        <text class="cuIcon-right content"></text>
      </view>
      <view class="item">
        <view class="label">预约地址：</view>
        <view class="content">{{ detail.address }}</view>
      </view>
      <view class="item">
        <view class="label">订单状态：</view>
        <view class="content">{{ statusMapping[detail.status] }}</view>
      </view>
      <view class="item">
        <view class="label">下单时间：</view>
        <view class="content">{{ detail.createTime }}</view>
      </view>
      <view class="item">
        <view class="label">支付时间：</view>
        <view class="content">{{ detail.payTime }}</view>
      </view>
      <view class="item">
        <view class="label">支付方式：</view>
        <view class="content">{{ detail.payWay }}</view>
      </view>
      <view class="item">
        <view class="label">支付金额：</view>
        <view class="content">￥{{ detail.totalMoney }}</view>
      </view>
      <view class="item">
        <view class="label">截至日期：</view>
        <view class="content">{{ detail.end }}</view>
      </view>
      <view class="item">
        <view class="label">订单号：</view>
        <view class="content">{{ detail.id }}</view>
      </view>

    </view>

    <my-dialog ref="pay" content="支付成功" icon="cuIcon-check"/>
    <my-dialog content="你确定要取消订单吗？" ref="cancel" show-cancel/>
    <my-dialog content="你确定要结束服务吗？" ref="stop" show-cancel/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import MyDialog from "@/components/dialog";

export default {
  components: {MyDialog},
  name: "technician-order-info",
  data() {
    return {
      detail: null,
      type: 0,
      statusMapping: {
        1: "待支付", 2: "已支付", 3: '已过期', 5: "已完成"
      },

      preferentialType: [
        {label: '无', value: null}
      ],
      preferentialIndex: 0,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.id = options.id;
    this.type = options.type || 0
    this.getInfo();
  },
  computed: {
    preferentiaModel() {
      return this.preferentialType[this.preferentialIndex];
    }
  },
  methods: {
    refresh() {
      this.getInfo();
    },
    handleLocationClick() {
      uni.openLocation({
        longitude: Number(this.detail.lng),
        latitude: Number(this.detail.lat),
        name: this.detail.address,
      })
    },
    getInfo() {
      Api.getOrderDetail(this.id).then(res => {
        this.detail = res
      })
    },
    handleSelect(e) {
      this.preferentialIndex = e.detail.value
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
}
</script>

<style scoped lang='scss'>
.wrapper {


  .header {
    background-color: white;
    display: flex;
    padding: r(20px);

    .left {
      height: r(120px);
      width: r(120px);
      border-radius: 50%;
      margin-right: 30px;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;


      .name {
        color: #333333;
        font-size: r(32px);
        margin-bottom: r(12px);
      }

      .level {
        color: #909090;
        font-size: r(26px);
      }

    }

  }

  .info {
    background-color: white;
    margin-top: r(24px);

    .item {
      display: flex;
      justify-content: space-between;
      padding: r(20px 30px);

      & + .item {
        border-top: 1px solid #F4F4F4;
      }
    }


    .action {
      display: flex;
      justify-content: flex-end;
      padding: r(50px 30px);

      .btn {
        background-color: $primary-color;
        color: white;
        font-size: r(22px);
        padding: r(11px 22px);
        border-radius: r(50px);
      }
    }
  }
}
</style>